<template>
  <div>
    <div class="form">
      <el-select v-model="cityId" placeholder="省" @change="handleQuery">
        <el-option
          v-for="item of provinceList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>

      <el-button @click="handleQuery" class="item" type="primary">搜索</el-button>
      <el-button @click="onReset" class="item">重置</el-button>
    </div>

    <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
      <el-table-column label="序号" align="center" type="index" width="50" />
      <el-table-column label="昵称" align="center" prop="schoolName" />
      <el-table-column label="医院" align="center" prop="hospitalName" />
      <el-table-column label="省" align="center" prop="province" />
      <el-table-column label="市" align="center" prop="city" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="handleQuery"
    />
  </div>
</template>

<script>
import { customsClearance } from '@/api/skinDisease/rankstu/rankstuApis'
export default {
  props: ['provinceList'],
  data() {
    return {
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10
      },
      cityId: null,
      dataList: [],
      listLoading: false,
      submitLoading: false
    }
  },
  methods: {
    handleQuery() {
      this.listLoading = true
      const params = {
        ...this.query,
        conditions: { cityId: this.cityId }
      }
      customsClearance(params).then(res => {
        this.listLoading = false
        this.dataList = res.data.records
        this.total = res.data.total
      })
    },

    onReset() {
      this.cityId = null
      this.handleQuery()
    }
  },
  mounted() {
    this.handleQuery()
  }
}
</script>

<style scoped>
.form {
  margin-bottom: 20px;
}

.item {
  margin-left: 20px;
}
</style>
